<template>
  <div class="art_show_bgs">
    <div class="bgi">
      <img
        :src="getpath(this.show_art.imgUrl)"
        alt="2022 7 28 2"
        class="bgi1"
        v-cloak
      />
      <img
        :src="getpath(this.show_art.imgUrl)"
        alt="2022 7 28 2"
        class="bgi2"
        v-cloak
      />
      <div class="mask"></div>
    </div>
  </div>
  <div class="art_show">
    <div class="art_show_top">
      <h3>X!d!a!</h3>
      <h4>于影而驰的个人小站</h4>
    </div>
    <div class="art_show_bd">
      <h1>{{ show_art.title }}</h1>
      <div class="someinfo">
        <h3>{{ show_art.style }}</h3>
        <h4>
          作者:
          <p>于影而驰</p>
        </h4>
        <div class="datetime">
          <p>创建时间:</p>
          <p>{{ dateTime[0] }}</p>
          <p>{{ dateTime[1] }}</p>
        </div>
      </div>
      <span
        ><p>项目链接:</p>
        <span class="spanlink">{{ show_art.url_link }}</span></span
      >
      <p class="pbd">{{ show_art.body }}</p>
    </div>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { mapActions } from "vuex";
export default {
  mounted() {},
  created() {
    let id = useRoute().query.id;
    this.get_Article_Show(id).then(() => {
      this.show_art = this.$store.state.art_show[0];
    });
  },
  computed: {
    dateTime() {
      let time1 = this.show_art.dateTime.slice(0, 10);
      let time2 = this.show_art.dateTime.slice(11, 19);
      return [time1, time2];
    },
  },
  data() {
    return {
      show_art: {},
    };
  },
  methods: {
    ...mapActions(["get_Article_Show"]),
    getpath(path) {
      return path ? require("../../assets/" + path) : ""; //path不为null就返回对应的路径
    },
  },
};
</script>

<style lang="less" scoped>
@font-face {
  font-family: "english";
  src: url("/src/fonts/Babyque.ttf");
}
@font-face {
  font-family: "xda01";
  src: url("/src/fonts/上首刺云体.ttf");
}
@font-face {
  font-family: "xda02";
  src: url("/src/fonts/极字经典综艺简繁.ttf");
}
.art_show_bgs {
  width: 100%;
  height: 100%;
  .bgi {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    .bgi1 {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 1350px;
      z-index: -49;
      opacity: 0.88;
      filter: blur(0.5px);
    }
    .bgi2 {
      position: fixed;
      width: 100%;
      z-index: -50;
      filter: blur(7px);
    }
    .mask {
      position: fixed;
      display: block;
      width: 100%;
      height: 100%;
      background-color: rgba(119, 118, 118, 0.4);
      z-index: -40;
    }
  }
}
.art_show {
  margin: 0 auto;
  width: 1350px;
  display: flex;
  flex-direction: column;
  .art_show_top {
    width: 1350px;
    height: 70px;
    background-color: rgba(4, 4, 4, 0.712);
    box-shadow: 0 0 4px 6px rgba(55, 55, 55, 0.665);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding: 0 50px;
    justify-content: space-between;
    user-select: none;
    h5 {
      color: white;
      font-size: 25px;
    }
    h5:hover {
      text-shadow: 0 0 4px rgb(6, 155, 214), 0 0 14px rgb(6, 129, 177),
        0 0 24px rgb(3, 81, 112);
      cursor: pointer;
    }
    h3 {
      letter-spacing: 4px;
      color: #fff;
      font-family: english;
      font-size: 60px;
      text-shadow: 0 0 4px rgb(6, 129, 177), 0 0 14px rgb(6, 129, 177),
        0 0 24px rgb(6, 129, 177);
    }
    h4 {
      letter-spacing: 2px;
      color: #fff;
      font-size: 20px;
      font-family: xda01;
      margin-right: 20px;
    }
  }
  .art_show_bd {
    min-height: 600px;
    flex: 1;
    background-color: rgba(237, 237, 237, 0.695);
    box-shadow: 0 0 5px 2px #2f2f2f;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    padding: 8px 7px;
    h1 {
      align-self: center;
      font-size: 42px;
      font-family: xda01;
    }
    .someinfo {
      display: flex;
      justify-content: space-around;
      color: rgb(72, 72, 72);
      align-items: center;
      margin: 10px 0;
      .datetime {
        display: flex;
        p {
          margin-right: 8px;
          color: rgb(72, 72, 72);
        }
      }
      h4 {
        display: flex;
        margin-left: 145px;
      }
    }
    span {
      display: flex;
      align-items: center;
      background-color: #b2b2b2;
      margin: 10px 0;
      p {
        margin-right: 15px;
        margin-left: 10px;
        color: #3b3b3b;
        font-size: 22px;
        background-color: rgba(255, 255, 255, 0.678);
        padding: 6px;
        border-radius: 10px;
      }
      .spanlink {
        font-size: 25px;
        color: rgb(137, 137, 176);
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .spanlink:hover {
        color: rgb(83, 83, 255);
      }
    }
    .pbd {
      margin: 10px 0;
      background-color: rgba(237, 237, 237, 0.595);
      box-shadow: 0 0 5px 2px #9e9e9e;
    }
  }
}
[v-cloak] {
  display: none;
}
</style>